<template>
  <div class="item" :class="{active:isActive}" @click="handleClick">
      <slot></slot>
  </div>
</template>

<script>
    export default {
        props:{
            isActive:{
                type:Boolean, //约束该属性的类型是Boolean
                //required:true, //约束该属性必须要传递
                default:false,
            },
        },
        methods:{
            handleClick(){
                //我知道发生了一点重要的事情，但我不知道该做什么，此时通知父组件
                this.$emit("active",123);
            },    
        }
    };
</script>

<style scoped>
    .item.active{
        background: #bbb;
    }
    .item{
        width:100%;
        height:100%;
        cursor:pointer;
        background: linear-gradient(to right, #ddd, pink);;   

    }
    .item:hover{
        background: #ccc;
        transition:0.5s;
    }
</style>